<template>
  <el-container class="el-container">
    <el-header class="header">
      <div class="header-content">
        <h1>企业人事管理系统-管理员</h1>
        <div v-if="userInfo" class="welcome-container">
          <span>欢迎您，{{ userInfo.userName }}</span>
          <el-button type="danger" @click="logout">登出</el-button>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside
          class="aside"
          :style="{ width: isCollapsed ? '64px' : '200px' }"
          @mouseenter="handleAsideMouseEnter"
          @mouseleave="handleAsideMouseLeave"
      >
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :collapse="isCollapsed"
            collapse-transition
        >
          <!-- 菜单项 -->
          <el-menu-item index="1" @click="setCurrentComponent('UsersAndEmployees')">
            <el-icon :size="isCollapsed ? 18 : 22">
              <user />
            </el-icon>
            <span slot="title">用户与员工管理</span>
          </el-menu-item>
          <el-menu-item index="2" @click="setCurrentComponent('SendAttendance')">
            <el-icon :size="isCollapsed ? 18 : 22">
              <calendar />
            </el-icon>
            <span slot="title">考勤发送</span>
          </el-menu-item>
          <el-menu-item index="3" @click="setCurrentComponent('DepartmentManagement')">
            <el-icon :size="isCollapsed ? 18 : 22">
             <Postcard />
            </el-icon>
            <span slot="title">部门管理</span>
          </el-menu-item>
          <el-menu-item index="4" @click="setCurrentComponent('SalariesManagement')">
            <el-icon :size="isCollapsed ? 18 : 22">
              <money />
            </el-icon>
            <span slot="title">薪资管理</span>
          </el-menu-item>
          <el-menu-item index="5" @click="setCurrentComponent('CheckLeaveApplication')">
            <el-icon :size="isCollapsed ? 18 : 22">
              <check />
            </el-icon>
            <span slot="title">离职申请审核</span>
          </el-menu-item>
          <el-menu-item index="6" @click="setCurrentComponent('EmployeesChange')">
            <el-icon :size="isCollapsed ? 18 : 22">
              <refresh />
            </el-icon>
            <span slot="title">查看员工调动记录</span>
          </el-menu-item>
          <el-menu-item index="7" @click="setCurrentComponent('SystemLog')">
            <el-icon :size="isCollapsed ? 18 : 22">
              <document />
            </el-icon>
            <span slot="title">系统日志</span>
          </el-menu-item>
          <el-menu-item index="8" @click="setCurrentComponent('EChartsComponent')">
            <el-icon :size="isCollapsed ? 18 : 22">
              <pie-chart />
            </el-icon>
            <span slot="title">统计图表</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main class="main" @mouseenter="handleMainMouseEnter" @mouseleave="handleMainMouseLeave">
        <component :is="currentComponent"></component>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {onMounted, ref,onBeforeMount} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {
  ArrowDown,
  Calendar,
  Postcard,
  Money,
  Check,
  Refresh,
  Document,
  PieChart,
  User
} from '@element-plus/icons-vue'

// 引入所需组件
import CheckLeaveApplication from '@/views/AdminUser/CheckLeaveApplication.vue'
import DepartmentManagement from '@/views/AdminUser/DepartmentManagement.vue'
import EmployeesChange from '@/views/AdminUser/EmployeesChange.vue'
import SalariesManagement from '@/views/AdminUser/SalariesManagement.vue'
import SendAttendance from '@/views/AdminUser/SendAttendance.vue'
import SystemLog from '@/views/AdminUser/SystemLog.vue'
import UsersAndEmployees from '@/views/AdminUser/UsersAndEmployees.vue'
import EChartsComponent from "@/views/AdminUser/EChartsComponent.vue";
import axios, {request} from "axios";
import router from "@/router";

// 组件映射表
const components = {
  CheckLeaveApplication,
  DepartmentManagement,
  EmployeesChange,
  SalariesManagement,
  SendAttendance,
  SystemLog,
  UsersAndEmployees,
  EChartsComponent
}

const isCollapsed = ref(true)  // 默认收起
const userInfo = ref(null)  // 用户信息
const currentComponent = ref(components.UsersAndEmployees) // 当前渲染的组件

onMounted(() => {

  const storedUserInfo = sessionStorage.getItem('userInfo')
  if (storedUserInfo) {
    userInfo.value = JSON.parse(storedUserInfo)
  }
})
onBeforeMount(()=>{request2();})
// 侧边栏鼠标进入时展开
const handleAsideMouseEnter = () => {
  isCollapsed.value = false
}
const request2=()=>{
 const token=sessionStorage.getItem('token')
  axios.get("http://localhost:8080/admin/dashboard?token="+token).then((res)=>{
    if(res.data.code!==200){
      router.push('/');
      setTimeout(()=>{
        alert("你没有权限");
        },200)
    }
  })
}
// 侧边栏鼠标离开时立即收回
const handleAsideMouseLeave = () => {
  isCollapsed.value = true
}

// 设置当前组件
function setCurrentComponent(componentName) {
  currentComponent.value = components[componentName]
}

// 登出功能
const logout = () => {
  ElMessageBox.confirm('您确认要退出登录吗？', '退出登录', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('userInfo')
    userInfo.value = null
    window.location.href = '/' // 跳转到登录页面
  }).catch(() => {
    console.log('用户取消退出')
  })
}
</script>

<style scoped>
.aside {
  background-color: #f4f7fc;
  transition: width 0.3s ease-in-out;
  overflow: hidden;
  border-right: 1px solid #e5e5e5;
}
.header-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.el-menu {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.el-menu-item {
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.el-menu-item:hover {
  background-color: #f2f2f2;
}

.el-menu-item.is-active {
  background-color: #409eff;
  color: #fff;
}

.el-menu-item .el-menu-item__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  padding-left: 20px;
}

.el-icon {
  margin-right: 10px;
}
.header {
  background: linear-gradient(135deg, #6a82fb, #fc5c7d);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 70px;
  font-size: 20px;
  border-bottom: 2px solid #e5e5e5;
}

.welcome-container {
  display: flex;
  align-items: center;
}

.welcome-container span {
  margin-right: 10px;
}

.el-container {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.main {
  background-color: #f0f2f5;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
</style>
